<template>
  <div class="page-container">
    <el-tabs v-model="activeName" @tab-click="tabsClick" class="tabs-box">
      <el-tab-pane label="按会员统计" name="member">
        <cm-table
          dataUrl="/report/memberTrade"
          :filters="memberFilters"
          :filterFields="memberFilterFields"
          :columns="memberColumns"
          :autoLoadPage="false"
        />
      </el-tab-pane>
      <el-tab-pane label="按券商统计" name="broker">
        <cm-table
          dataUrl="/report/brokerTrade"
          :filters="brokerFilters"
          :filterFields="brokerFilterFields"
          :columns="brokerColumns"
          :autoLoadPage="false"
        />
      </el-tab-pane>
      <el-tab-pane label="按时间统计" name="date">
        <cm-table
          dataUrl="/report/dateTrade"
          :filters="dateFilters"
          :filterFields="dateFilterFields"
          :columns="dateColumns"
          :autoLoadPage="false"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const options = [
  {key: '1', value: '按天'},
  {key: '2', value: '按周'},
  {key: '3', value: '按月'},
  {key: '4', value: '按年'},
];

const memberFilters = ref({
  memberName: '',
  startDate: '',
  endDate: '',
  reportType: '',
});
const memberFilterFields = ref([
  {prop: "memberName", label: "会员账号"},
  {prop: "startDate", label: "开始时间", type: 'date'},
  {prop: "endDate", label: "结束时间", type: 'date'},
  {prop: "reportType", label: "统计类型", type: 'select', options: options},
]);
const memberColumns = ref([
  {prop: "memberName", label: "会员账号", minWidth: 120},
  {prop: "reportDate", label: "统计时间", width: 120},
  {prop: "tradeAmount", label: "成交额", width: 120, type: 'number', point: 2},
  {prop: "commission", label: "成交手续费", width: 120, type: 'number', point: 2},
  {prop: "totalCharge", label: "总手续费", width: 120, type: 'number', point: 2},
]);

const brokerFilters = ref({
  brokerName: '',
  startDate: '',
  endDate: '',
  type: '',
});
const brokerFilterFields = ref([
  {prop: "brokerName", label: "券商名称"},
  {prop: "startDate", label: "开始时间", type: 'date'},
  {prop: "endDate", label: "结束时间", type: 'date'},
  {prop: "reportType", label: "统计类型", type: 'select', options: options},
]);
const brokerColumns = ref([
  {prop: "brokerName", label: "券商名称", minWidth: 120},
  {prop: "reportDate", label: "统计时间", width: 120},
  {prop: "tradeAmount", label: "成交额", width: 120, type: 'number', point: 2},
  {prop: "commission", label: "成交手续费", width: 120, type: 'number', point: 2},
  {prop: "totalCharge", label: "总手续费", width: 120, type: 'number', point: 2},
]);

const dateFilters = ref({
  startDate: '',
  endDate: '',
  type: '',
});
const dateFilterFields = ref([
  {prop: "startDate", label: "开始时间", type: 'date'},
  {prop: "endDate", label: "结束时间", type: 'date'},
  {prop: "reportType", label: "统计类型", type: 'select', options: options},
]);
const dateColumns = ref([
  {prop: "reportDate", label: "统计时间", width: 120},
  {prop: "tradeAmount", label: "成交额", width: 120, type: 'number', point: 2},
  {prop: "commission", label: "成交手续费", width: 120, type: 'number', point: 2},
  {prop: "totalCharge", label: "总手续费", width: 120, type: 'number', point: 2},
]);
const activeName = ref('member');
</script>

<style scoped lang="scss">
.tabs-box {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tabs-box :deep(.el-tabs__content) {
  height: 1px;
  flex-grow: 1;
}
.tabs-box :deep(.el-tab-pane) {
  height: 100%;
}
</style>